<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 插值语法 -->
         {{msg}}
         <!-- v-html解析为标签 -->
         <div v-html="a"></div>
         <!-- v-bind绑定变量 -->
         <div v-bind:title="title">块级元素</div>
         <!-- v-biand简写为: -->
          <div :title="title" v-bind="obj">块级元素</div>
          <!-- js表达式 -->
           {{num + 10}}
           {{3>5?'YES':'NO'}}
           {{msg.split(' ').reverse().join(' ')}}
           <!-- 时间绑定 -->
           <button v-on:click="handler">点击我{{count}}</button>
           <!-- 事件简写为@ -->
            <button @click="handler">点击我{{count}}</button>
            <!-- 条件渲染 -->
            <div v-if="score>=90&&score<=100">优秀</div>
            <div v-else-if="score>=80&&score<90">良好</div>
            <div v-else-if="score>=70&&score<80">中等</div>
            <div v-else>及格</div>
            <div v-show="isShow">我是一个div</div>
            <ul>
                <li v-for="(item,index) in arr" :key="item.id">{{index}}---{{item.name}}</li>
            </ul>
            <section :class="{active:isShow}">我是section标签</section>
    </div>
    <script>
        const{createApp,ref} = Vue;
        createApp({
            setup(){
                const msg = ref ('hello Vue3');
                const a = ref('<a href="www.baidu.com">百度一下</a>');
                const title =ref('我是悬浮到标签的提示说明');
                const num =ref(1);
                const count = ref(0);
                const score = ref(85);
                const isShow = ref(true);
                const arr = ref([
                    {id:1,name:"ronda"},
                    {id:1,name:"terry"},
                    {id:1,name:"larry"}
                ])
                const obj = ref({
                    id:'first',
                    class:'second',
                    style:"background-color:red"
                })
                const handler = () =>{
                    count.value++
                }
                return{
                    msg,
                    a,
                    title,
                    obj,
                    num,
                    arr,
                    count,
                    handler,
                    score,
                    isShow
                }
            }
        }).mount('#app')
    </script>
</body>
</html>